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Introduction 


A quick note from the authors 


Should you use Lorem Ipsum, or real content in your designs? And 
what are some effective patterns for laying your content for users? 

These are the questions we seek to answer in our exploration of 
content as an interface. Because vision is the user’s strongest sense, 
and users seek out sites for their content, it’s safe to assume that 
content must be the priority of any visual interface. 

Design treatments like colors, contrast, position and alignment are 
really just methods of presenting content in the most visually digest¬ 
ible format. We aren’t advocating that designers shouldn’t create a 
single wireframe before all the content is finalized. We’re simply ad¬ 
vising that clients, designers, and stakeholders treat the design and 
content with equal importance — one cannot exist without the other. 

In this book, we’ll cover topics including content-first design, design¬ 
ing for scanning, and the power of typography as a visual language. 
While we discuss design fundamentals such as visual hierarchy 
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and the anatomy of typography, this is not a book of speculation or 
theorizing. We explain the theory, but we teach through example. 

You’ll find best practices from 27 companies including Design Milk, 
Amazon, TED, Dropbox, Hulu, Abduzeedo, CreativeBloq, and 
AirBnB. Design is a hands-on field, so we want to show how theory 
translates into real-world applications. 


For the love of UI design, 
Jerry Cao 

co-written by Kamil Zieba, Krzysztof Stryjewski, and Matt Ellis 




Jerry Cao is a content strategist at UXPin where he gets to put 
his overly active imagination to paper every day. In a past life, he 
developed content strategies for clients at Brafton and worked in 
traditional advertising at DDB San Francisco. In his spare time he 
enjoys playing electric guitar, watching foreign horror films, and 
expanding his knowledge of random facts. 

Follow me on Twitter 



Co-founder and head of product, Kamil previously worked as a 
UX/UI Designer at Grupa Nokaut. He studied software engineering 
in university, but design and psychology have always been his 
greatest passions. Follow me on Twitter @ziebak 



Krzysztof is a graphic designer at UXPin. He is also a typogra¬ 
phy enthusiast and a founder of the global Typeseeing Project. 
Since 2014, he has been an instructor at the Academy of Fine 
Arts in Gdansk, where he teaches his students about design 
theory and design software. In his free time, he enjoys playing and 
inventing board games. Follow me on Behance 



With a passion for writing and an interest in everything anything 
related to design or technology, Matt Ellis found freelance writing 
best suited his skills and allowed him to be paid for his curiosity. 
Having worked with various design and tech companies in the 
past, he feels quite at home at UXPin as the go-to writer, research¬ 
er, and editor. When he’s not writing, Matt loves to travel, another 
byproduct of curiosity. 





Real Content vs. Lorem Ipsum 


Design in the absence of content is not design, it’s decoration. 


Jeffrey Zeldman 


We’ve said it before and we’ll say it again: content is king. 


That means content should not be the last stage in design, some¬ 
thing to be filled in right before the launch. Content is the backbone 
of your site, and must be developed together with the visual design. 


jm ipsum dolor sit a met, eonsecletger adipiiscing elil. SodLai 
tun^^ii-Ap velit euismod aliquot. Pellentesque el arcgJ^^iTi 
v-cncnaW^nrOvidP urqii. PcllCnt£Squc ct OrXu- NorQy^^rclrO. 
VeStibulurn^^|rra vafiuS enrim. 

Nam I a greet dui So^^^una. Nun'iC PC IdCuS eloilenU 

sagittis. Pellentesque aCT^jois._ A^^Sm justo lettus, iaculis a. 
auctor sed, Congue in, nisj^ean luctus vu I put ate turpis. 
Mauris urna Sem r suS^^^vita9!^dignissim id, gltriceS Sed. 
nmnc- 


Phasellus Tu^fietg$< tempus sit amet, ul£ricl^|c^ porta net, 
ftil 15 . malesoado nglio sed pede yoMppH^^inar,. Sed 

nop^mjm. Maoris et dolor. Pelleritesque suscipit aWtosan 
7$$a. In consectetuer, lorem eu lobortis egestas, velit^ 


Photo credits: “Lorem ipsum flush justified 
Wikimedia. Creative Commons. Edited from original. 
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Sure, using a placeholder like lorem ipsum is tempting with its 
convenience - but ultimately it will hold you back. For starters, 
using a placeholder perpetuates the idea that content is second¬ 
ary. But more importantly, using lorem ipsum means passing up 
the opportunity to further improve your site’s most important 
asset: the content. 

In this piece, we’ll discuss why real content matters, then review 
how you can take a more content-first approach to your site design. 


The Real Pitfalls of Fake Text 

It may seem like an insignificant point, but avoiding filler content 
actually does make a difference. 

In our experience, the only time filler content is acceptable is during 
very early stages of design when you’re trying to brainstorm as 
many usable layouts as possible. In that case, lorem ipsum can help 
as a quick and dirty way of getting something to fill the space so 
you can get a rough idea of the full aesthetics of a layout. 

Approach lorem ipsum the same way you would an early sketch. 
Play around with it, use it to arrive at better design ideas, and then 


move on. 
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Photo credit: “Lorem Bokeh 1”. Blake Burhart. Creative Commons 2.0. 


As we discussed in the Guide to Usability Testing, a webpage with 
a simple structure but quality content performs much better on 
usability tests than a nice layout with subpar text. That at least 
proves its worth - but the importance of content in design goes 
even farther beyond that. 

[Once you progress beyond low fidelity, ditch the lorem ipsum.] 

Words are the foundation of all interaction. They are the language 
used for primary communication with your user, regardless of how 
engaging the other interface elements are. Content Strategist Ahava 
Leibtag said it best: 

We need to start urging our clients to think about their content not 
just as a commodity, but as the starting point, the building blocks 
of a website. It’s time to stop building the house without knowing 
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how many bedrooms it may need. Because you know what they 
call things that are beautiful, but have no function? Useless. 

This seems like an obvious argument, and yet some designers might 
still attempt content shortcuts until the zero hour. But why? 

In an interview with Adaptive Path, Kristina Halvorson, founder of 
Brain Traffic, explains that the clients (and sometimes stakehold¬ 
ers) are partly at fault. According to her, clients and internal teams 
might urge designers to deliver designs and structure as quickly as 
possible - spending time on content then slows down the comple¬ 
tion of the deliverables that the clients want to see. 

Halvorson goes on to explain that designers use lorem ipsum as a 
way to focus on the layout, but this is counter-intuitive. The layout 
should be built around the content, not the other way around. The 
structure and flow of a page should be heighten the effect of the 
words, but that’s impossible if it’s built with nonsense words that 
will eventually be replaced. 

In her opinion, content strategists, web writers, editors, or any other 
kind of representatives of content should be present at the draw¬ 
ing board with designers and the product team from day one. This 
not only gives a head start to the writing, it also holds someone 
accountable for the content throughout the process. 

And what’s the alternative, when you don’t design for content? 
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Rian van der Merwe, in an article for Elezea, describes with visual 
aids the all-to-common approach when content is a secondary con¬ 
cern to design. A typical wireframe with lorem ipsum placeholders 
would look like this: 


Lorem ipsum dolor srt amet, conseciecwr adipisring a Lit In sit a met uLtrEcles 

Ucus, 

Lp-'fm ipU j- h rtvn.s&imW'r **P'*:™J ** 


Lorem ipsum dolor sit amet.tonsectetur acsipiseirig elH;- 



Source: UXPin 


It looks fine, doesn’t it? After all, the layout and structure were all 
designed to perfectly fit the lorem ipsum text, so everything is in 
order. But what happens when it’s time to add the actual content? 



Yivt eflftifle ux process Hives »n UKPin 




Source: UXPin 
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The chances that your actual content will fill the same space as your 
placeholder are very slim, almost inconceivable. In most cases at 
least some redesigning and restructuring must be done, which is a 
waste of time and resources. 

As Merwe describes it, the design is the packaging for the content. 
If you design the packaging first, you’re doing so without knowing 
what’s going into it. When, inevitably, the content doesn’t fit the 
packaging, you must either start over with a new design, or alter 
the content to make it fit by sacrificing some parts or adding filler. 

Developing content early ensures its place at the top of your pri¬ 
orities. It’s better to modify a design around the content than the 
content around design. 


Words are the foundation of all interaction. 


Additionally, avoiding lorem ipsum placeholders can also safeguard 
against embarrassing mistakes. You don’t want your site to acciden¬ 
tally end up like this: 


volP Pwrrus, ias vttd ftuvw£, 

| LOUSY PLAC EHOLDER HERE| 


tweet this 


Photo credit: UXPin 
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To learn more about how words, language, and content affect the 
user experience, check out the free ebook Interaction Design Best 
Practices: Mastering the Tangibles. 


Applying the Content-First Approach 

Don’t get us wrong - no one’s expecting your content to be perfect 
before the rest of the design commences. In fact, it’s usually a grad¬ 
ual process, as with the other areas. The content doesn’t need to be 
finished early. We’re saying it should be started early. 

Let’s look at a few tips from Liam King, who we think has provided 
some of the most practical advice on the matter. 

1. Write the Content Yourself 

UX designers aren’t copywriters, but this isn’t the final version. 
With your experience in web design, you know enough about 
written text to create valid proto-content - content that will be 
later improved and perfected by a professional copywriter. For 
the time being, though, your text will be close enough to a work¬ 
ing copy to be able to design around. We don’t just recommend 
this method - we practice it ourselves here at UXPin. 

The downside to this method is, yes, it is more time and effort 
on your part, especially in comparison to copying-and-pasting 
the content from a lorem ipsum generator. However, it’s worth 
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the extra effort: the end product can only benefit from content 
being generated as early as possible. 


This week 

Title here 

Dili] niEaqua voluplati5quis.cs 
autaquatur andignimus dolorpo 
retienij suMtousct quc ycfo us 
ab inulpa dit auditae molumc 

VE ll 11 ( it^ll I - 1 IllMhVli rl IlLJirVlirl 

vnlnre^ pnlmii II mint a Imu^ rpprn 
When? / Where? 


This week 

Contemporary art 
exhibition 

Interested in art? Cgme and see 
the latest trends in contemporary 
art Visit us, contemplate beautiful 
paintings and get to know new 
people! Adiubiiun tahee fur dll 

visili'tiS ill i f i ii l.-iy + j vh , riiiiiL|r\ frE’irri 

6 pm bo 1C pm. 

The Great Gallery 
1 April - 30 April 


This week 

The greatest leaders of 
contemporary art 

We'd like to invite all ait lovers to 
tamiliarizelhcmsclvciwith the 
latest trends in contemporary art. 
Gome and see over IDO pointings 
Md ii i Led by moil fairiuus repiesen- 

Iril i vt-% i rf i c ji iI Peii| m Hit i y rii t fanHin 
all over the wor Id. Admission Is 
free for all visitors on Friday 
■evening* from ti pm to 1 0 pm 
and lor all students 

Tlii-.i firuvil ri.ilh a ry 
9 am - 10 pm,. 

Tuesday 1 April -Thursday id April 


Photo credits: UXPin inspired by GatherContent 

The first example on the left is the notorious lorem ipsum, the 
second example is content fit for print, and the third example is 
a rough but adequate content for design purposes. 

As you can see in these examples, even the rough third exam¬ 
ple still gives the designer more valuable insight than the lorem 
ipsum. While not perfect, the third “proto-content” still draws 
attention to a lot of important design issues that should be ad¬ 
dressed, such as: 

• the name of exhibition is too long 

• multi-day events could cause problems 

• promo panels must support long titles 
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• the time and date format isn’t very readable 

No, the third example is not perfect. But the important point to 
remember is that all of the above issues would have gone ignored 
until the final stages (where they would be rushed to complete) 
if the lorem ipsum content was preserved through the process. 

2. Design with Existing Content 

While this method is not applicable if you’re building a brand 
new site, it’s quite helpful if you’re redesigning an existing site. 
The old site’s content will be a much more helpful placeholder 
than the meaningless lorem ipsum. Granted, it won’t be a perfect 
match for your new content after the rewrites, but chances are 
it will be similar enough to work. 

Like King says, content like staff profiles and about pages will 
probably not be changed radically, and previously written articles 
and posts won’t be changed at all. Try copying and pasting your 
pre-existing text into a wireframe/prototype to see how it looks. 

3. Pull Content from Competitors 

While we don’t necessarily recommend this method as a first 
choice, it’s still better than a generic placeholder (think of it like 
a “smart lorem ipsum”). 

The procedure is pretty self explanatory: simply copy and paste 
some relevant example text from your competitor (or competi- 
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tors), then change the names, places, etc. accordingly. It will be 
a lot more suitable than lorem ipsum, plus you can take an in- 
depth look at how they designed for the same issues. 

If you’re like further details into the processes of designing your 
site around content, the Web Standards Sherpa has an excellent 
post about the methodology behind what they call “messaging 
hierarchy.” 

Before you create your content, plan it out using a Page Table 
template. Once you’ve created your content, you can help struc¬ 
ture it in your design with Content Slice Diagrams. 


Takeaway 

It’s a fact that can’t be overstated: content is king. 

Any extra time and effort spent on developing content, no mat¬ 
ter how superfluous it seems, will improve the end product. You’ll 
want to start on your content as early as possible, and avoid the 
corner-cutting use of generic placeholders like lorem ipsum. 

By the time your content audit comes around, you’ll notice drastic 
difference between content that was originally planned since the 
beginning, and content that was written at the end and jammed 
into the already-made design. 


Designing for Scanning: 
F-Pattern 


Don’t be fooled: chances are, your users scan your content for the 
best parts. Don’t take it personally, it’s nothing against your content 
(and doesn’t undermine its value), it’s just standard user behavior. 



Photo credit: “Tired eye”. Quinn Dombrowski. Creative Commons 2.0. 

The F-pattern is the go-to layout for text-heavy websites like news 
sites, blogs, or in-depth landing pages. Once we explain how and 
why it works, you’ll start to notice its use on popular sites all over 
the web. 


Don’t be fooled: chances are, your users scan your content for the best parts. 
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The F-Pattern describes the most common user eye-scanning pat¬ 
terns when it comes to blocks of content. 

The F refers to the reader first scanning a horizontal line across the 
top of the screen, as is understandable for cultures that read left-to- 
right. Next, the user scans a vertical line down the left side of the 
screen, looking for keywords or points of interest in the paragraph’s 
initial sentences or subsection titles. When the reader finds some¬ 
thing they like, they begin reading normally, forming horizontal lines. 

The end result is something that looks like the letters F or E. As 
shown in Web UI Patterns 2014, CNN and NYTimes both use the 
F-Pattern. 

Jakob Nielson of the Nielsen Norman Group conducted a readabil¬ 
ity study based on 232 users scanning thousands of websites and 

elaborates on the practical implications of the F-Pattern: 

• Users will rarely read every word of your text (in fact, only 20%). 

• The first two sections are the most important and should contain 
your hook. 

• Cover only one idea per paragraph, using bullets as much as 
possible 

• Start paragraphs and new sections with enticing keywords. 
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How could this impact the interface design of your website? Take 
a look below. 


How to Use the F-Pattern 


The below example, from Brandon Jones’s piece on the subject, vi¬ 
sualizes the F-Pattern. 



spedcybcy \ 


1 


1 

z 


V fupulAi 



HrtfrniJiiriiiJrd 
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sftc for users? And how can y»u create a visual language 
through typography? TTit fr« c-lrogk tffP’in answers 
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Mwctl 2'j, Ml fa % Eteri ef If* WM 
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Photo credit: Speckyboy.com 


Clearly, you’ll want to place your best content across the top, with 
a solid anchor in the upper-left corner (Point 1), the only spot prac¬ 
tically guaranteed to get noticed. That’s why you commonly see a 
company’s logo here. 
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Commonly, designers will put the navigation bar across the top 
leading to the upper-right corner (Point 2). This makes it convenient 
to users who are searching for a keyword that is the title of its own 
section, for example, “Help.” Designers vary on how thick or catchy 
they make the top bar: a thin, subtle top line will encourage further 
scanning immediately, while a bigger one will take advantage more 
of its dominant position, promoting the content therein at the cost 
of the content below it. 

After the top row, the user will drop down to the next noticeable 
section (Point 3) and repeat the process (Point 4). In theory, users 
will continue going down the page until they find something of 
interest, but in reality they will likely leave after a few seconds - 
unless you can hold their attention. 

For this reason, experts recommend breaking up the monotony with 
an “awkward” element after the first 2 or 3 rows - anything that 
disrupts the routine. This can be any variation of the earlier rows, 
just to keep the page visually stimulating. Standard practice is to 
break the convention every 1,000 pixels beneath the fold. 


The visual aid below is a nice reminder of how the F-pattern works. 
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Photo credit: lnc.com 


It’s worth noting that the end of each row (where Points 2 and 4, 
etc. are located), are the best places for advertisements and calls- 
to-action due to the momentary pause before moving to the next 
row. That’s why you see the “New eBook Out Now!” call to action 
placed at the end of the first row of content. 


The F-pattern works great for these motives, as they present these 
options in a noticeable way, but without distracting from the pri¬ 
mary content. Just remember that content is always king, and the 
sidebar exists only to get users involved in a deeper level. 
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With the F-pattern, the righthand sidebar may serve 2 main purposes: 

1. Featuring relevant but unrelated content - Anything you 
want your user to see, but that doesn’t fit in organically with 
the primary content. These could be advertisements, links to 
other posts, a social media widget, etc. 

2. As a search tool - This place could obviously host a search 
bar, but could also have category listings, tag clouds, a “pop¬ 
ular posts” widget, etc. 


This is a lot to take in at once, so we’ll show you what we mean with 
some examples below. 




howto 

CATCH A 
TERRORIST 


J h: N.iA wm- ram m ill «ui 

p'lmr imnk H-j! dm Tkirf 

fV+fl Wyffc* 


Photo credits: thenewyorker.com 


The New Yorker shows that the F-Pattern works especially well for 
sites that naturally feature advertisements. The first David Yurman 
advertisement is noticeable, but not distracting thanks to the use of 
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red in the primary photo. As we described before, this advertise¬ 
ment is again shown at the end of the second row of content, where 
the eye naturally pauses. 

You can see this pattern adapted for sites with sparse copy as well. 



ff 


* 


Photo credits: izettle.com 

iZettle takes a less conventional approach to the F-pattern on their 
homepage. In fact, it’s layout represents a hybrid of the F-pattern 
mixed with the Z-pattern (which we discuss later). 


They manage to avoid a templated look by overlaying the primary 
copy (“Grow your business with iZettle”) and the call-to-action on 
a large background image. We’d consider this the bare minimum 
for adapting this reading pattern to your interface layout - no 
doubt there’s visually sexier examples out there, but this still gets 
the job done. 
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Why Is This Pattern Effective? 

Designers use the F-pattern repeatedly because it mimics users’ nat¬ 
ural sight patterns. Most people have been reading top to bottom, 
left to right their entire lives. 

Designing a site layout with the F-pattern flows with the current, 
encouraging the user’s sight to follow naturally. Conversely, con- 
tent-heavy sites that ignore the F-pattern are creating unnecessary 
strife by forcing the readers to readjust their natural eye movement. 



Photo credits: www.freespee.com 


Site layout affects conversions, so it’s important to know the value 
of your on-screen real estate. Take Freespee as an example; after 
redesigning their site into the above version, subsequent A/B testing 
revealed that they could increase their phone conversation rate by 
30% for the same ad spend, simply by putting their phone number 
in a more prime location in the upper right. 
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Now, the above example is by no means a perfect design. They could 
make the bullet copy more prominent, and replace the background 
stock image with a visual that supports the described values. But 
that perhaps speaks even more about the power of layout: even if 
your typography and graphics aren’t the best, adapting your layout 
for human reading can still improve site performance. 

That being said, let’s dissect what they’ve done right: 

• The top-left logo attracts attention at point 1, where users nat¬ 
urally scan the navigation, perform searches, or any other 
top-level actions 

• The top-right phone number shown at point 2 is the first call 
to action. Since it’s highlighted in green, this further attracts 
the right attention. 

• In the body of the page, concise bullets are featured at point 3. 
This text is structured like a “mini F-pattern” so that the eye 
naturally moves down to the call-to-action 

But the F-Pattern is not infallible. The main drawback to this lay¬ 
out is its predisposition to monotony - it’s easy to bore your users 
with repetitive and similar content in your rows. This is precisely 
why it’s advised to throw in an “awkward” row every and then; the 
variation helps hold the users’ attention. 
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Photo credits: www.kickstorter.com 

As you can see above, Kickstarter breaks its page into 3 distinct 
rows. The third row demonstrates the “awkward” row, variating 
from the pre-established pattern by laying out some widgets verti¬ 
cally (as it were, around the 1000-pixel mark). 

Understand that people generally scan large chunks of content in 
an F-pattern, then alter it as needed to suit your site’s brand and 
personality. As you modify the pattern, make sure you follow these 

rules described by A List Apart for ratios and grids. 
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Takeaway 

The F-pattern doesn’t just apply to text. 

Any time you show a variety of content, you’ll need to organize it 
somehow. The F-pattern simply follows the common trends of the 
human eye so that you can optimize the structure of your layout. 
You don’t need to follow it rigidly - it’s a guideline, not a template. 
Even if all you take from this is to punctuate your top navigation 
bar with a call-to-action in the corner, that minor tweak could make 
all the difference. 


More Examples of the F Pattern 

Below, you’ll see the F-pattern at work with some familiar names 
across the Internet. Some follow a traditional F-pattern, while oth¬ 
ers insert the “awkward break” and other creative twists. 
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Designing for Scanning: 
Z-pattern 


In the last chapter we explained how the F-pattern is the natural 
eyesight trend when users encounter text-heavy pages. But what 
about pages that are less content-heavy? 


1 


2 


3 


4 


Source: UXPin 

Think of the Z-pattern as the sister to the F-pattern. Both are nat¬ 
urally occurring eye patterns, as validated by eyetracking studies. 
The difference is in the type of content the user encounters. Usually, 
content-rich pages will trigger the F-pattern while pages with strong 
primary content are more suitable for the Z-pattern. 
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What is the Z-Pattern? 

Where content is more spacious - or at least organized looser - 
a user’s sight will typically follow a pattern like the letter Z. 

Like the F-pattern, the reader first scans a horizontal line across the 
top of the page, whether because of the menu bar, or simply out of 
a habit of reading left-to-right from the top. When the eye reaches 
the end, it shoots down and left (again based on the reading habit), 
and repeats a horizontal search on the lower part of the page. 



Photo credits: www.marketo.com 


The Z-pattern is perfect for interfaces (like Marketo above) where 
simplicity is a priority and the call-to-action is the main takeaway. 
In short, the F-pattern organizes content, the Z-pattern emphasizes 
calls-to-action. 

It’s easy to confuse the F- and Z-patterns based on looks alone, as 
they both are organized into horizontal rows. The key difference is 
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in how the eye moves downwards. Once the F-pattern is triggered, 
the user will scan a straight vertical line down the left side until 
it reaches something of interest. The Z-pattern, on the other hand, 
will more or less cover every line, which is why it mostly applies 
to pages that feature a small enough amount of content to make 
this feasible. 


How to Use the Z-Pattern 


We’ll again use a visual aid from Brandon Jones’s post to explain 
the Z-pattern. 



Photo credit: MailChimp.com 

Using the above graphic, we can break down the Z-pattern into its 
key areas (based on Jones’ analysis). 
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It begins the same as the F-pattern: starting at the upper-left hand 
corner (Point 1) and moving horizontally all the way to the right 
(Point 2). As with the F-pattern, Point 1 is the most valuable spot, 
which is why is almost always houses a company logo. Again like 
the F-pattern, Point 2 is a great location for a call-to-action - how¬ 
ever, not the main call-to-action, as we’ll explain below. 

The Z-pattern then deviates on its own pathway. The prime area of 
the Z-pattern is the center of the page, the large expanse where the 
eye scans on its way down to the second row. The trick to this area 
is fill it with content that interests the user, while still urging their 
sight downward to the next line. This space usually hosts an image 
or an image carousel; something that will maintain user interest, 
but not enough to stop them from continuing to browse the site. 

The user then again scans the next row horizontally, left-to-right 
(Point 3 to Point 4). Here is the main appeal of the Z-pattern; think 
of this layout as a minor build-up leading to Point 4. This is the 
spot where you want to put your most valuable content, usually a 
call-to-action. 

Because Point 4 is the finish line, the row between it and Point 3 
should contain content that pushes the user’s sight to the corner. 
This is an excellent place for a series of smaller gateways to other 
sections. Basically, the goal for this row is to incite title scanning, 
drawing the eye ultimately to Point 4. 
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Another important factor of the Z-pattern is the background:you 
should separate it from the main framework as much as possible. 
The Z-pattern relies on its structure to achieve results, and a flashy 
background distracts the user. Keep backgrounds simple and muted. 





Photo credits: www.evernote.com 
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The Z-pattern can even extend throughout the entirety of the page, 
repeating Points 1-4 if you feel that more value propositions are 
needed before the call-to-action. As you can see above, this is ex¬ 
actly what Evernote does by starting with a “Sign Up Now” call- 
to-action, guiding users through a few selling points, and finishing 
their repeated Z-pattern with payment option calls-to-action. 
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Photo credits: www.dropbox.com 

DropBox takes a visually simpler approach to this zig-zag pattern 
by doing away with any background images altogether. Instead, 
more functionality is built into the layout since a “Learn More” call- 
to-action connects each section of the winding pattern as your eye 
makes its way down the page. This also helps informed readers click 
to the next relevant page without needing to read all the copy first. 
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Why Is This Pattern Effective? 

The Z-pattern is popular amongst designers because it adheres to 
the central tenements of web design. 

There is a visual hierarchy and premeditated structure, plus it opens 
key visual pathways to both a brand and a call-to-action. While the 
F-pattern follows a route more organic to natural eyesight trends, 
the Z-pattern is a bit more refined for storytelling purposes (since 
you lead the user as they zigzag from point to point).. 


Another benefit of the Z-pattern is its versatility. The central image can 
be enlarged or shrunk, the pattern can be repeated any number of 
times (to accommodate several different calls-to-action), and the con¬ 
tent in each row can be anything that follows the unifying structure. 
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Photo credit: Helbak.com 


The Z-pattern’s fixed structure can also be its drawback. As a lay¬ 
out designed to control a user’s sight, it’s susceptible to unplanned 
distractions and anything that knocks the user’s vision off course. 
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Remember that your user’s eye will always be attracted to the big¬ 
gest and brightest elements on a page, so if you’re designing for the 
Z-pattern, make sure your complementary elements are entertain¬ 
ing - but not overpowering. 


Takeaway 

Both the F-pattern and the Z-pattern are widely recognized web de¬ 
sign strategies, but each for different reasons. Determine the main 
goal of your site first and foremost - if it must organize a large se¬ 
lection of content, choose the F-pattern; if it leans towards eliciting 
a specific action as a result of visual narrative, choose the Z-pattern. 

If you’re designing for the Z-pattern, don’t forget its emphasis on 
structure. Know where the key points are located, and how they’re 
best used. Remember to keep secondary content subdued so you 
don’t “derail” your user’s sight pathway, and don’t be afraid to take 
advantage of the layout’s versatility. 


More Examples of the Z Pattern 

Here are some examples of the Z-pattern used right. You’ll notice 
the different forms it can take, while still serving the same goals. 
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Creating Visual Language 
Through Typography 


Form equals function, and that doesn’t change just because we’re 
dealing with text. 

Typography is the aesthetics behind the written word, the art of 
making your text serve a purpose based only on its looks. This in¬ 
corporates many different physical options - font, size, color, posi¬ 
tion, etc. - and also external factors like what’s being said, how it’s 
being said, and the context surrounding it. 



Photo credits: “antique alphabet”. Plaisanter. Creative Commons. 
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First we’ll talk about how the content and context of what you’re 
saying should affect the look of the words, then we’ll discuss how 
to utilize the various visual elements, and we’ll close by offering 
some helpful tips. 


Typography is the aesthetics behind the written word, the art 
of making your text serve a purpose based only on its looks. 


Many Languages Within a Single Word 

Just like many other areas in design, content is still king in typog¬ 
raphy. Ultimately, the meaning behind the words you’re communi¬ 
cating will affect the look of the text. Knowing the intention behind 
the message is the first step in the process. 

A message’s emotion or tone is more important than the words 
themselves. Gunther Kress and Theo van Leeuwen summarize it 
best in their book Reading Images: The Grammar of Visual Design 

when they say: 

The visual component of text is an independently organized and 
structured message, connected with the verbal text, but in no 
way dependent on it and similarly the other way round. 

This signifies that every printed word can communicate two sepa¬ 
rate meanings: the literal definition and the emotion suggested by 
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the typography. According to Caroline Knight and Jessica Glaser, 

your typographic choices create many layers of meaning. 

In their first example, the word STOP seems imposing and loud. The 
impression is one of interruption, and carries a sense of urgency to 
it. This effect is not an accident. 

Let’s look at the elements at play here. 

For starters, the text is large and all-caps, which is a quick and easy 
way to add gravity to any word. The subtler choices just support 
the tone: the font choice is simplistic and no-nonsense; the letters 
are thick tightly spaced, creating an oppressive block of text. The 
color scheme of white against black corroborates the directness, 
while the dominant black “negative space” lends more immediacy 
to the message. Lastly, the position of the word in the center makes 
it seem more worthy of attention. 

Counterpart in this image. 

This version is far less intense. 

It seems less like a command, and more of a gentle suggestion to be 
taken at your leisure. The text is small and lower-cased for start¬ 
ers, and on top of that has a more detailed font, with slight italics 
- the text here is more whimsical. The script typeface feels like a 
refreshing break from the monotonous black background, creating 
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an oasis of elegance. The position at the bottom-right corner, the 
last seen position on the screen, makes the message seem almost 
like an afterthought. 


Same exact word. Two completely different meanings. 


Every printed word communicates two meanings: 
the literal definition and the emotion of the typography. 
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The Importance of Context 

At it’s core, typography is just another tool for communication. As 
such, context will play a large role in its success or failure. Typo¬ 
graphic context is determined by two factors: 

The Readers - Who is reading your words and how are they 
likely to interpret different visual cues. 

The Type of Message - Distinctions between blog posts, ban¬ 
ner ads, product descriptions, etc. will all affect interpretation, 
not to mention the different types and styles of each of the 
above. 

Let’s explore both below. 

1. The Readers 

The first concern of context in typography is who will read your 
message. Different people interpret the look of the text in dif¬ 
ferent ways, just as they would interpret a painting in different 
ways. 

For this, it’s important to reference your user personas. We dis¬ 
cussed user personas at length in Interaction Design Best Prac¬ 
tices: Volume 1, but to summarize, a user persona is a character 
made up to represent one of your target users. When making 
important design decisions, personas act as another person in the 
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room to think about. “Would Sally Perkins (a seasonal shopper) 
see this link in the corner?” for example. 


Different people interpret typography in different ways, 
just as they interpret a painting in different ways. 



"Design isn't just how it looks, it's how it 
works." 


Source: UXPin 

When crafting your typography, keep your user personas in mind. 
Will they understand the intentions behind your creative choices, 
or will it go over their heads? Which kind of typeface would be 
most effective on them? Just as other areas of design, knowing 
whom you’re designing for will answer a lot of questions early on. 

Glaser and Knight, for example, explain the use of the Old Goth¬ 
ic font, as in the [uicy Couture. To the brand’s loyal followers, 
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this font denotes youth, a certain edginess, even unapologetic 
sex-appeal. 

However, an older or less fashionable audience would have a 
completely different association. They tend to interpret the font 
as more sophisticated, classy, or traditional - not at all applicable 
on the backside of yoga pants! This audience would make more 
sense out of the New York Times logo below. 


The differences aren’t always this extreme. Even within your 
target audience, differences in age, gender, social status, etc. will 
all have subtle effects on the typography’s interpretation. 



Photo credits: nytimes.com 


When it comes to judging the aesthetics of the typography, we 
recommend writing down (or at least reviewing in your head) 
the top 5 words that immediately come to mind. Make sure it 
correlates with your audience and design objective, otherwise 
keep searching. 


2. The Type of Message 

Are you designing typography for an advertisement or an error 
message? If it’s for an advertisement, what kind - charity, luxury 
goods, candy? Is the ad funny or serious? 
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Just like you need to know whom you’re writing for before you 
start, you should also know why you’re writing. You’ll need to 
make sure your typography is in sync with your overarching 
message. 

Let’s look at TDBank and how they create different impressions 
with the same sans serif font. 
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Photo credits: tdbank.com 


It makes sense to use a straightforward, but approachable 
sans-serif typeface like this for the bank homepage. The design 
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isn’t particularly innovative, but it certainly creates a basic level 
of trust since the typeface is crisp and the green colors suggest 
wealth and serenity. 
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How we Bank Human '. 


Longer horn; now longeffer). 

Wfre opw-n l&ng^r than oth^f 
bank*. Meaning, night and eufn 
ten minuter before and after 
the hours on our doots. So if you're 
a little early or late, you're still 
right on time. 

o 


Open weekends. 

For a lot of people,, weekend* are the 
time to get things done. Since one of 
theme things ii often hanking, our doors 
stay open. Every Saturday and Sunday. 
In almost every town we serve. 

m 


Unexpected conveniences. 

Ever wanted to make a deposit 
while enjoying a lollipop, then 
kee p the pen when you're done? 
At ID Bank, if s an option. 

You can even bring your dog. 

<7 


Photo credits: www.bankhumanagain.com 

The typeface becomes much more interesting on their microsite 
discussing how to humanize banking. Presented in larger size 
and bolder weight, the font lives up to the messaging of “bank¬ 
ing human”. It’s professional, tastefully modern, and feels like 
a friendly advisor. The green color is also brighter and livelier 
than on the homepage, adding to the human feel. 

The point here is that the same font serves two different purpos¬ 
es depending on where it’s used. The bottom-line voice from the 
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main site comes across much happier on the microsite, just as 
the bottom’s hopeful optimism doesn’t come across on the top. 

You don’t want to take this visual correlation to an extreme, how¬ 
ever. 

For example, let’s take a look at Teen Vogue. It’s safe to say their 
audience consists mostly of tweens, but their site design feels 
more aspirational than immature. The typeface strikes the per¬ 
fect balance between youth and elegance. 

leemoGiE 

IS t* v t JJ* i h # 


prom fashion celeb style cnlerToiriTienf beouty my life insider video scorch Cl 



Photo credits: www.teenvogue.com 


They don’t make the mistake of literally matching form and func¬ 
tion. For example, the designer could have gone with a more 
literal appeal with something fun and quirky like the below font, 
appropriately named “CK Tween”. But such a treatment would 
feel contrived and tacky, leaving a saccharine aftertaste. 
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Match the typeface to the desired mood, but exercise restraint 
or it will feel cheesy. 


Combine Copy and Typography 

We started this chapter explaining that a word’s literal meaning 
and typographical meaning are two completely different things, 
but that doesn’t mean they can’t work together. A word’s look and 
definition can complement each other when done right, heighten¬ 
ing the intention beyond what each could accomplish on their own. 

But word choice goes beyond mere meaning. When writing, think 
carefully about the lesser-acknowledged properties of words, such as: 

• Length - How many letters? How many syllables? 

• Sound - Rhyming can be an influential tool, so look for oppor¬ 
tunities to use it. 

• Shape - Which letters make up the word? What is the word’s 
outline? 

Beyond the audience and design objectives, you also need to balance 
legibility with readability. Legibility refers to the design elements 
such as width of strokes, presence of serifs, etc. Readability, on the 
other hand, is how the content, font color, legibility, leading, track¬ 
ing, and all other elements combine to create an overall impression. 
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Graphic Designer Douglas Bonneville provides straightforward and 
effective advice on choosing and using typefaces. Let’s expand on 
some of these insights for legibility and readability. 

1. Legibility 

Decorative typefaces (like Calligraffiti below on the left) have 
poor legibility because they’re designed to be glanced, not read. 
Meanwhile, serif typefaces like Crimson Text below on the right 
are much more legible and practical for content. 


zompliti# m WCPtn or tnpi)?iyoaifd.iy- 

layared modtyns from Sfreteh and 'Ph'iioshop ~ ttihtr why 
t/m iv^ rmh ^tick dtsimt cb&yes m WCPia 



Design complete mock ups in UXFjn, or import your fully 
layered mockups from Sketch and Photoshop — either way,, 
you can make quick design changes in UXFm. 


frdd ihcpcrpd term tmyes axiom txer interface dementi, 
and more io any modyp wtih our- dnay-and-drop tmaye 
importer 

Sfvy ipurpersonal d&styn ioach fo e&ty maejup fy 
axiomtz^y i^poyraphy. txer tnierfa<e dsmente kdyrouneti 
and mre wM tfe yraphte dcsiyn editor. 


Acid the p&rfect iconsj images, custom user interface elements^ 
and more to any mockup with our drag and ^ds op image 
importer. 

Bring your personal design touch to every mockup by 
customizing typography, user interface elements^ backgrounds 
and more with the graphic design editor. 

CRIMSON FONT 


Photo credits: www.uxpin.com 

Think about where you typeface should fall between the two ex¬ 
tremes above, then keep these tips in mind: 

• Select sleek and crisp typefaces - The more ornamental and ar¬ 
tistic the typeface, the higher the cognitive load as users will first 
need to visually process the font instead of digesting the content. 


Don’t draw attention to the typography - Your typeface treat- 
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ment should certainly be elegant and aesthetically pleasing. But 
don’t forget its role is accentuating content, not competing with it. 

• Keep it balanced - Typography is all about the balance of ele¬ 
ments. If your font size is small, make sure you select a typeface 
with a larger x-height. If your background is grey, use white in¬ 
stead of black for the font color. When in doubt, opt for regular 
or normal weights. 

For a quick set of guidelines for font legibility, check out this 
helpful excerpt of Web Style Guides. 

2. Readability 

A related concept to the F-pattern and Z-pattern, readability af¬ 
fects how much users actually want to engage with your content. 
Unless low readability is part of the message you’re conveying, 
make sure to prioritize communication over style. 

Let’s take a look at an example based on graphic designer Doug¬ 
las Bonneville’s piece on how to select typefaces. 
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Design complete mockups in 
from Sketch and Photoshop - 
changes in UXPin. 


Design complete mockups in UXPin, or 
Photoshop — either way, you can make 


Add the perfect icons, images, custom i 
with our drag-and-drop image importer. 


Add the perfect icons, images 

to any mockup with our drag-i 


Bring your personal design touch to every 
elements, backgrounds, and more with t 


Photo credits: www.uxpin.com 


The version on the right features decreased font size, lightened 
colors, full justification, and some tweaks to the leading and 
tracking. As a result, it’s much less readable. 

In order to keep content readable like the example on the right, 

keep these tips in mind: 

• Match the typeface to its role - Some typefaces are better for 
headlines, while others are more flexible and are still readable 
at smaller sizes. It’s not a bad idea to pair a more fun font (like 
Knockout) for headlines with a highly readable font (such as 
Tisa or Proxima Nova) for the body copy and microcopy. 

• Keep the measure in mind - As a general rule, your line 
length (also known as the measure) should be set to 60 to 70 
characters. If your measure is too generous, users may have 
trouble reading from line to line. 
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• Create breathing room with proper line height - To prevent 
text lines from crashing together, we recommend setting a line 
height between 1.3 to 1.5. 

To learn more about legibility versus readability, check out this 

comprehensive piece from tuts+. 


Unless you want to be unreadable, prioritize clarity over style. 


Takeaway 

It’s tempting to think of typography as an extension of the site’s 
writing, but that’s not accurate. Nor is it accurate to think that the 
two are completely unrelated. The truth is that both are separate 
fields, each with their own best practices; however, they two are 
always intrinsically linked, and so each should be designed with 
regards to the other one. 


A Structure for 
Practical Typography 


Typography is a second language communicating on a subtler level 
beyond your actual words. The actual content is what you say, but 
typography is the first impression of how you say it. 



Photo credit: “Typography”. Taryn. Creative Commons 2.0. 


Typography creates an experience before users have even read a 
single word or clicked a menu button. Typography doesn’t just tell 
a story, it creates an atmosphere and emotional response the same 
way as a tone of voice. 
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As we described in Interaction Design Best Practices, words are the 
foundation of all interactions. Great designers understand this dis¬ 
tinction and treat text not as content, but as its own interface. 

In this chapter we’ll talk about how to use typography to its fullest 
extent. We’ll begin by exploring the levels of typographic hierarchy, 
then dive into individual elements, and finish off with additional tips. 


Levels of Hierarchy in Typography 


As we described in Web UI Best Practices, typographic hierarchy is 
a subset within visual hierarchy. Typographic hierarchy arranges 
lettering so that important words stand out easily to readers who 
are scanning for information. 
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Without this hierarchy, every letter and word in a design would 

appear identical. Your design would be about as visually appealing 

as an MS DOS command prompt. As a general rule, Designer Carrie 

Cousins recommends that your typography supports at least three 

levels of hierarchy. 

Try to shape your typography into these levels: 

1. Primary - The most noticeable text on the page, usually bigger 
and a brighter color than the other layers of text. Because it’s 
so powerful, this level should be sparse - reserve it only for 
headlines and decks (known as “furniture”). 

2. Secondary - Less noticeable than the primary level, but more 
noticeable than the main content, the secondary level handles 
everything in between. This level features some minimal but 
distinct elements in size and color, and typically includes sub¬ 
heads, captions, pull quotes, infographics, or supportive blocks 
of text separate from the main content. 

3. Tertiary - This is the main content, the most common, and the 
least noticeable. It should be simple and not flashy - the goal of 
the other layers is to attract attention; the goal of this layer is 
to encourage the reader to become immersed in the text, hence 
less distraction. 

4. Other - Smaller levels of hierarchy can be created by sparingly 
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applying italics, color, bolding, underlining, and other effects 
to tertiary type. These levels might include underlined links, a 
few bolded words for emphasis within paragraphs, etc. Text 
that shows up in banners, logos, or other background graphics 
also fall in this category. 

In order to illustrate the separation of layers utilized properly, let’s 
look at the below example from [on Tangerine. 


We, Who Are Web Designers -Mon, 19 thSep son {66} 

In 2003, my wife Lowri and I went to a christening party. We were 
friends of the hosts but we knew almost no-one else... 

Photo credits: www.vl.jontangerine.com 

The typography here has 3 distinct layers to clearly explain the ele¬ 
ments of the piece without explaining a thing. The title is obviously 
“We, Who Are Web Designers,” but why is it obvious? The text is 
bigger (size), bolder (weight), and is set at the top-left where the 
viewers eyes go first (position). 

The second level is the publication date, set in a different size and col¬ 
or than the rest of the text, and also italicized to give more distinction. 

The third level, the article preview, is devoid of features. Compared 
to the other layers it may seem plain, but that is so readers aren’t 
distracted when trying to appreciate the actual content. 
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Elements of Hierarchy in Typography 

Like other design fields, typography follows its own structural hier¬ 
archy. Knowing typographic hierarchy is like knowing how to use 
typography, specifically knowing how to give certain words priority 
over others. 



Photo credits: www.uxpin.com 

UXPin includes hundreds of fonts included from standard libraries 
and Google Fonts. The styles, colors, and background colors can be 
modified for any text. 

Before we delve into the levels of typographic hierarchy, Jeremy 
Lloyd, Creative Director at Sparkbox, thoroughly deconstructs the 
dozens of factors at play in your text. By manipulating the fields 
below, you’ll better control your typography, and thus better control 
where your users’ eyes go. 
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Size - The basic unit of typographic hierarchy. Text of different 
sizes attract different levels of attention. 


TAKE ADVANTAGE OF 
GOOD TYPOGRAPHY 


Need beautiful fonts in your-design? Pick from hundreds of tyioefoces 
from standard libraries and Gaagre Fo^ts. 
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Photo credits: www.uxpin.com 


Weight - The thickness of the text, most easily increased through 
bolding. Although subtler than size, it’s still a straightforward 
method of making your text stand out. Bolding is especially ef¬ 
fective for adding weight to tertiary type. 

if 0njd, ter baS ^orbrpicno unt ta3 Ckuicorb finfc bie 
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Photo credits: “Fraktur”. Wikimedia. Creative Commons. 


Italics - Italicized letters draw attention is a less dramatic way 
than bolding. Because it’s a subtle touch, this works well for ter¬ 
tiary type. 
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Capitalization - Just like emails written in Caps lock sound like 
you’re yelling, the same applies to web typography. Always be 
careful when capitalizing letters, because they appear dispropor¬ 
tionately larger and pop into the foreground. 

Color - Now we’re getting into the complex factors. Warm colors 
(red, orange, yellow) tend to attract more attention than cool col¬ 
ors (blue, purple), especially if warm-colored text is set against 
a cool-colored background. Color contrast also matters, since 
saturated or bright colors jump out more than muted ones. 

TAKE ADVANTAGE OF 
GOOD TYPOGRAPHY 

You can use a ton of beautiful fonts from Google Fonts library. Need something 
simple and nice looking, or maybe something more fancy? Wove got them all. In 
Lolal r there is 100 mo&L popular Google Funis to choose. 


The quick brawn fox jumps over the lazy doR 

The quick brown fox jumps over the lazy dog 

1 he quirk hrown fo>c jumps over the lazy dog 

i&F tiff? tfi I.'f'LL'-f 2 .1 f/lf fiijy 

The quick brown fox jumps over the lazy dog 

The quick brown fox jump & over the lazy do§ 

The quLk Li uwri fun jumps u'm Uiu Id^y ^-4 
TJtfcflJuci. fuvmM.. fox juMjti (frjy. 

The quick brown fox jumps over the lazy dog 
The quick brown fox jumps aver the lazy dog 


Cabin 

pri" i6 a] 

normal □ 

- | 

r-i 


j ft 1 f 1 li 1 £ 1 



'll 

ill 

ill 

III 

Lortm psum 


Photo credits: www.uxpin.com 


Contrast - Contrast between any of these factors - size, weight, 
or color - will attract attention. Contrasting typefaces for head¬ 
lines versus body copy helps create hierarchy. 
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Photo credits: www.talkpr.com 

Space - White space can make text appear larger (and therefore 
more readable). Lack of space makes text feel more cramped and 
smaller. Every space affects your hierarchy, from simple kerning 
to the relationship between words and the edge of the screen. 

Position - Just like we talked about in both the Gestalt and space chap¬ 
ters, proximity can be a fast and simple way to convey meaning. 

Your tools allow people move from theory 
to under standing by experiencing the 
ideas being shared and inter acting in r eal 
time! 

Read story 

Photo credits: www.uxpin.com 

Orientation - Turning letters and words sideways, diagonal, or 
upside down adds to visual appeal. The effect creates surpris¬ 
ing eye candy for users. This works especially well for adding 
emphasis to short words/phrases within primary text. Tilting, 
rotating to vertical, and other methods immediately focus the 
user on the affected text. 
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Photo credits: www.zombies.epicmagazine.com 

• Texture - As Carrie Cousins describes, texture is highly subjec¬ 
tive, making it one of the hardest elements to master. This doesn’t 
refer to the texture of the lettering itself, but of the texture cre¬ 
ated through the typographic patterns on the page. Each block 
of text produces its own pattern, so to create texture, break the 
pattern by changing any of the other elements. Apply sparingly, 
otherwise it becomes distracting. 
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For more details on the theories that govern typographic best prac¬ 
tices, read Mandy Brown’s article on the Adobe Typekit Blog. To 

check out some of the best examples of web typography, take a look 
at this gallery from awwwards. 













A Structure for Practical Typography 70 


Additional Expert Resources 

We couldn’t possibly fit all the expert advice on typography in just 
a single chapter. If you’re interesting in learning more, take a look 
at the sources below: 

• 10 Typography Tips Every Designer Should Know - These tips 
deal specifically with kerning, the spaces between letters. 

• Size Matters: Balancing Line Length and Font Size in Respon¬ 
sive Web Design - The title says it all. Check this out if you’re 
curious about typography across different sizes of devices. 

• 18 Super Quick Web Typography Tips for Newbies - If you 

need to learn a lot about typography in a little bit of time, this 
piece is for you. 


Takeaway 

Designers tend to be visual thinkers, so they embrace typography 
with open arms. If all visual elements of a web page design factor 
into the user experience, then of course typography will make a 
huge impact, especially on content-heavy sites. 

It helps to keep in mind the different variations one can put on text, 
like size, weight, and the others mentioned above. Once you have a 
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solid understanding of the different ways you can alter your typog¬ 
raphy, try implementing the experts’ tips we compiled here. Don’t 
neglect the language of typography: poor or lacking typography will 
be just as repulsive to readers as glaring grammar errors. 

With typography and with actual writing, the rule is the same: learn 
how to speak the language. We hope you’ve found this e-book help¬ 
ful, and feel free to try out some of the tips in UXPin. 


Start my free UXPin trial 

(up to 30 days) 




✓ Complete prototyping framework for 

web, mobile, and wearables 

✓ Collaboration and feedback for any team size 
✓ Lo-fi to hi-fi design in a single tool 

✓ Integration with Photoshop and Sketch 



www.uxpin.com 












